Jassif Team Institution

AngularJS டேட்டா பைண்டிங்

AngularJS இல் டேட்டா பைண்டிங் என்பது மாடல் மற்றும் வியூவுக்கு இடையேயான ஒத்திசைவு ஆகும்.

டேட்டா மாடல்

டேட்டா மாடல் என்பது ஆப்ளிகேஷனுக்கு கிடைக்கும் தரவுகளின் தொகுப்பாகும்.

எடுத்துக்காட்டு

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.lastname = "Doe";
});

HTML வியூ

AngularJS ஆப்ளிகேஷன் காட்டப்படும் HTML கொண்டகான்டெய்னர் வியூ என்று அழைக்கப்படுகிறது.

வியூவுக்கு மாடலுக்கான அணுகல் உள்ளது, மேலும் மாடல் டேட்டாவை வியூவில் காட்ட பல வழிகள் உள்ளன:

<p ng-bind="firstname"></p>

<p>First name: {{firstname}}</p>

ng-model டைரக்டிவ்

HTML கண்ட்ரோல்களில் (input, select, textarea) மாடலில் இருந்து டேட்டாவை வியூவுடன் bind செய்ய ng-model டைரக்டிவைப் பயன்படுத்தவும்.

எடுத்துக்காட்டு

<input ng-model="firstname">

ng-model டைரக்டிவ் மாடல் மற்றும் வியூவுக்கு இடையே two-way பைண்டிங் வழங்குகிறது.

Two-way பைண்டிங்

AngularJS இல் டேட்டா பைண்டிங் என்பது மாடல் மற்றும் வியூவுக்கு இடையேயான ஒத்திசைவு ஆகும்.

மாடலில் டேட்டா மாறும்போது, வியூ அந்த மாற்றத்தை பிரதிபலிக்கிறது, மேலும் வியூவில் டேட்டா மாறும்போது, மாடலும் புதுப்பிக்கப்படுகிறது.

இது உடனடியாகவும் தானாகவும் நடைபெறுகிறது, இது மாடல் மற்றும் வியூ எப்போதும் புதுப்பிக்கப்பட்டிருக்கும் என்பதை உறுதி செய்கிறது.

முழுமையான எடுத்துக்காட்டு

<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="firstname">
    <h1>{{firstname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.lastname = "Doe";
});
</script>

AngularJS கன்ட்ரோலர்

AngularJS இல் உள்ள ஆப்ளிகேஷன்கள் கன்ட்ரோலர்களால் கட்டுப்படுத்தப்படுகின்றன.

மாடல் மற்றும் வியூவின் உடனடி ஒத்திசைவு காரணமாக, கன்ட்ரோலர் வியூவிலிருந்து முற்றிலும் பிரிக்கப்படலாம், மேலும் மாடல் டேட்டாவில் மட்டுமே கவனம் செலுத்தலாம்.

AngularJS இல் உள்ள டேட்டா பைண்டிங் நன்றி, கன்ட்ரோலரில் செய்யப்படும் எந்த மாற்றங்களையும் வியூ பிரதிபலிக்கும்.

எடுத்துக்காட்டு

<div ng-app="myApp" ng-controller="myCtrl">
    <h1 ng-click="changeName()">{{firstname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.changeName = function() {
        $scope.firstname = "Nelly";
    }
});
</script>

பயிற்சிகள் மூலம் கற்றல்

பைண்டிங் முறைகள் ஒப்பீடு